<!--
 * @Author: Gabriel 1599130621@qq.com
 * @Date: 2022-10-08 10:34:33
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2022-10-26 17:22:50
 * @FilePath: \nonogram\src\pages\Center.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="box" @contextmenu.prevent="() => undefined">
    <Nonogram
      :colors="colors"
      ref="Gram"
      :select="true"
      :width="props.view"
      :level="level"
      :create="create"
    >
      <template v-slot:Bottom>
        <div class="Tips">{{ text }}</div>
      </template>
      <template v-slot:Right>
        <div class="btns">
          <button @click="check">
            <div>{{ create ? "提交" : "完成" }}</div>
          </button>
          <button @click="reset"><div>重置</div></button>
          <button @click="replace"><div>更换</div></button>
          <button @click="edit">
            <div>{{ create ? "取消" : "编辑" }}</div>
          </button>
          <button @click="download"><div>下载</div></button>
          <button @click="checloutLevel">
            <div>
              {{ `${level * 5}x${level * 5}` }}
            </div>
          </button>
        </div>
      </template>
      <template v-slot:Left-Bottom>
        <div class="colorBtn">
          <ColorPicker
            :IColor="'#000000'"
            :NColor="ofColor?.Color"
            ref="onColor"
            >✔</ColorPicker
          >
          <ColorPicker
            :IColor="'#008080'"
            :NColor="onColor?.Color"
            ref="ofColor"
            >✖</ColorPicker
          >
        </div>
      </template>
      <template v-slot:Right-Top>
        <div
          v-show="!create"
          class="Time"
          ref="TimeDom"
          :style="{ fontSize: `${font}px` }"
        >
          {{ TextTime }}
        </div>
      </template>
    </Nonogram>
  </div>
</template>

<script setup lang="ts">
// import Nonogram from "@/components/Nonogram/Nonogram.vue";
import Nonogram from "../components/nonogram/nonogram.vue";
import ColorPicker from "@/components/ColorPicker/ColorPicker.vue";
import domtoimage from "dom-to-image-more";
import { computed, onMounted, ref, watch } from "vue";
const props = defineProps<{ view: number }>();
const Gram = ref<InstanceType<typeof Nonogram>>();
const onColor = ref<InstanceType<typeof ColorPicker>>();
const ofColor = ref<InstanceType<typeof ColorPicker>>();
// onColor.value.Color
const level = ref(2);
const maxLevel = computed(() => {
  let mv = Math.floor(props.view / 160);
  return mv < 4 ? 4 : mv;
});
const text = ref("");
const time = ref(Date.now());
const nowTime = ref(new Date(0));
const TimeDom = ref<HTMLDivElement>();
const font = ref(10);
const create = ref(false);

// 完成 校验
function check() {
  if (!create.value) {
    // 绘制校验
    const v = Gram.value!.check();
    if (!v.pending) {
      if (!v.errs) {
        text.value = `目前为止全部正确,剩余${v.lacks}处待完成`;
      } else {
        text.value = `目前解答有${v.errs}处错误`;
      }
    } else {
      text.value = `恭喜！您解决了谜题`;
      clearInterval(nowTimeout);
    }
  } else {
    // 编辑校验
    let sum = 0;
    Gram.value!.targetGrid.forEach((e) => {
      e.forEach((i) => {
        if (i == 1) {
          sum++;
        }
      });
    });
    if (sum < 7 * Math.pow(level.value, 2)) {
      text.value = "谜底格子数量过少";
    } else {
      create.value = false;
      aTimie();
      Gram.value!.setTextileStore()
    }

  }
}
function edit() {
  create.value = !create.value;
  if (create.value) {
    aTimie(false);
  } else {
    Gram.value!.resetTargetGrid();

    aTimie();
  }
}
const colors = computed(() => {
  return [onColor.value?.Color || "#000000", ofColor.value?.Color || "#008080"];
});
// 重置画图板
function reset() {
  Gram.value!.reset();
  text.value = "";
}
// 重新生成
function replace() {
  Gram.value!.replace();
  aTimie();
}
function checloutLevel() {
  level.value++;
  if (level.value > maxLevel.value) level.value = 1;
  reset();

  if (!create.value) {
    aTimie();
  } else {
  }
}
let timeout: NodeJS.Timeout;
function resetText() {
  clearInterval(timeout);
  timeout = setTimeout(() => {
    text.value = "";
  }, 5000);
}
const TextTime = computed(() => {
  const m = nowTime.value.getMinutes();
  const mm = m < 10 ? "0" : "";
  const s = nowTime.value.getSeconds();
  const ss = s < 10 ? "0" : "";
  return `${mm}${m}:${ss}${s}`;
});
let nowTimeout: NodeJS.Timeout;
function aTimie(set = true) {
  clearInterval(nowTimeout);
  time.value = Date.now();
  nowTime.value = new Date(Date.now() - time.value);
  if (!set) return;
  nowTimeout = setInterval(() => {
    nowTime.value = new Date(Date.now() - time.value);
  }, 1000);
}
function download() {
  const app = document.getElementById("app-box");
  domtoimage
    .toPng(app!, {
      filter: (node:Node) => {
        return node instanceof HTMLElement
          ? !node.hasAttribute("ignore")
          : true;
      },
    })
    .then((url) => {
      const img = new Image();
      img.src = url;
      const a = document.createElement("a");
      a.href = img.src;
      a.download = "NonoGram";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a)
    });
}
watch(text, resetText);
onMounted(() => {
  aTimie();
  font.value = TimeDom.value!.offsetWidth / 5;
});
</script>

<style scoped lang="less">
.box {
  width: 100%;
  flex: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-color: rgb(234, 230, 205);
  // overflow: hidden;
  .Tips {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // writing-mode: vertical-rl;
    color: Olive;
  }
  .Time {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // font-size: 30px;
  }
  .colorBtn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;

    align-items: center;
    font-size: 16px;
  }

  .btns {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
  }

  button {
    height: 30px;
    width: 50px;
    border: 2px solid black;
    color: black;
    border-radius: 3px;
    background-color: white;
    transition: all 0.1s;
    cursor: pointer;
    padding: 1px;
    overflow: hidden;
    position: relative;

    div {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 2px;
    }
    &:hover > div {
      color: white;
      background-color: black;
    }
    &:active {
      top: 1px;
    }
  }
}
</style>
